import React, {Component} from "react";
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts/lib/echarts';
import axios from "axios";
import {server_addr} from "../index";

export default class Technology extends Component {
    constructor(props) {
        super(props);
        this.state = {
            target0: "日K",
            target1: "MA",
            target2: "涨跌幅",
            first: true,
            option: {},
            base: [],
            dates: [],
            K_d: [],
            K_w: [],
            K_m: [],
            MA5: [],
            MA10: [],
            MA20: [],
            EMA12: [],
            EMA26: [],
            BOLL_u: [],
            BOLL_l: [],
            BOLL: [],
            zdf5: [],
            macd: [],
            dif: [],
            rsv: [],
            k: [],
            d: [],
            j: [],
            rsi: [],
            default: "83%"
        }
        this.getData = this.getData.bind(this);
        var stock = window.location.href.split('?')[1].split('=')[1];
        //基本信息
        axios.get(server_addr+"/technique/base?stock="+stock,{}).then((res)=>{
            this.setState({
                base: res.data
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //日K
        axios.get(server_addr+"/technique/day?stock="+stock,{}).then((res)=>{
            let dates = []
            let data = []
            for(var key in res.data){
                let Data = []
                dates.push(key);
                Data.push(res.data[key].split(',')[0]);
                Data.push(res.data[key].split(',')[1]);
                Data.push(res.data[key].split(',')[2]);
                Data.push(res.data[key].split(',')[3]);
                data.push((Data));
            }
            this.setState({
                dates: dates.reverse(),
                K_d: data.reverse()
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //MA
        axios.get(server_addr+"/technique/ma?stock="+stock,{}).then((res)=>{
            let data_1 = []
            let data_2 = []
            let data_3 = []
            for(var key in res.data){
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
                data_3.push(res.data[key].split(',')[2]);
            }
            this.setState({
                MA5: data_1.reverse(),
                MA10: data_2.reverse(),
                MA20: data_3.reverse()
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //EMA
        axios.get(server_addr+"/technique/ema?stock="+stock,{}).then((res)=>{
            let data_1 = []
            let data_2 = []
            for(var key in res.data){
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
            }
            this.setState({
                EMA12: data_1.reverse(),
                EMA26: data_2.reverse()
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //zdf5
        axios.get(server_addr+"/technique/change5?stock="+stock,{}).then((res)=>{
            let data = [];
            for(var key in res.data){
                data.push(res.data[key]);
            }
            this.setState({
                zdf5: data.reverse()
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //BOLL
        axios.get(server_addr+"/technique/boll?stock="+stock,{}).then((res)=>{
            let data_1 = []
            let data_2 = []
            let data_3 = []
            for(var key in res.data){
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
                data_3.push(res.data[key].split(',')[2]);
            }
            this.setState({
                BOLL_u: data_1.reverse(),
                BOLL: data_2.reverse(),
                BOLL_l: data_3.reverse()
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //MACD
        axios.get(server_addr+"/technique/macd?stock="+stock,{}).then((res)=>{
            let data = []
            for(var key in res.data){
                data.push(res.data[key]);
            }
            this.setState({
                macd: data.reverse()
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //DIF
        axios.get(server_addr+"/technique/dif?stock="+stock,{}).then((res)=>{
            let data = []
            for(var key in res.data){
                data.push(res.data[key]);
            }
            this.setState({
                dif: data.reverse()
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //RSV
        axios.get(server_addr+"/technique/rsv?stock="+stock,{}).then((res)=>{
            let data = []
            for(var key in res.data){
                data.push(res.data[key]);
            }
            this.setState({
                rsv: data.reverse()
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //KDJ
        axios.get(server_addr+"/technique/kdj?stock="+stock,{}).then((res)=>{
            let data_1 = []
            let data_2 = []
            let data_3 = []
            for(var key in res.data){
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
                data_3.push(res.data[key].split(',')[2]);
            }
            this.setState({
                k: data_1.reverse(),
                d: data_2.reverse(),
                j: data_3.reverse()
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //RSI
        axios.get(server_addr+"/technique/rsi?stock="+stock,{}).then((res)=>{
            let data = []
            for(var key in res.data){
                data.push(res.data[key]);
            }
            this.setState({
                rsi: data.reverse()
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
    }

    getData = (target) => {
        // if (target === "日K" || target === "周K" || target === "月K") {
        //     this.state.target0 = target
        // } else
        if (target === "MA" || target === "EMA" || target === "BOLL") {
            this.state.target1 = target
        } else {
            this.state.target2 = target
        }

        let legend_data1, res_data1, series1, legend_data2, res_data2, series2

        if (this.state.target1 === "MA") {
            legend_data1 = [this.state.target0, 'MA5', 'MA10', 'MA20']
            res_data1 = [this.state.MA5, this.state.MA10, this.state.MA20, this.state.K_d]
        } else if (this.state.target1 === "EMA") {
            legend_data1 = [this.state.target0, 'EMA12', 'EMA26']
            res_data1 = [this.state.EMA12, this.state.EMA26, this.state.K_d]
        } else if (this.state.target1 === "BOLL") {
            legend_data1 = [this.state.target0, '中轨线', '上轨线', '下轨线']
            res_data1 = [this.state.BOLL, this.state.BOLL_u, this.state.BOLL_l, this.state.K_d]
        }

        // if (this.state.target0 === "日K") {
        //     res_data1.push(this.state.K_d);
        // } else if (this.state.target0 === "周K") {
        //     res_data1.push(this.state.K_w);
        // } else if (this.state.target0 === "月K") {
        //     res_data1.push(this.state.K_m);
        // }

        series1 = [{
            type: 'candlestick',
            name: legend_data1[0],
            data: res_data1[legend_data1.length-1],
            itemStyle: {
                color: '#ef232a',
                color0: '#14b143',
                borderColor: '#ef232a',
                borderColor0: '#14b143'
            },
            emphasis: {
                itemStyle: {
                    color: 'black',
                    color0: '#444',
                    borderColor: 'black',
                    borderColor0: '#444'
                }
            }
        }]
        for (let i = 0; i < legend_data1.length-1; i++) {
            series1.push({
                name: legend_data1[i+1],
                type: 'line',
                data: res_data1[i],
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    width: 2
                }
            })
        }

        series2 = []
        if (this.state.target2 === "涨跌幅") {
            legend_data2 = ['5日涨跌幅']
            res_data2 = [this.state.zdf5]
        } else if (this.state.target2 === "MACD") {
            legend_data2 = ['MACD', 'DIF']
            res_data2 = [this.state.macd, this.state.dif]
        } else if (this.state.target2 === "RSV9") {
            legend_data2 = ['RSV9']
            res_data2 = [this.state.rsv]
        } else if (this.state.target2 === "KDJ9") {
            legend_data2 = ['K', 'D', 'J']
            res_data2 = [this.state.k, this.state.d, this.state.j]
        }else if (this.state.target2 === "RSI9") {
            legend_data2 = ['RSI9']
            res_data2 = [this.state.rsi]
        }
        if (this.state.target2 === "MACD") {
            series2.push({
                name: legend_data2[0],
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: res_data2[0],
                barWidth: 7
            },{
                name: legend_data2[1],
                type: 'line',
                xAxisIndex: 1,
                yAxisIndex: 2,
                data: res_data2[1],
                itemStyle:{
                    normal:{
                        color: '#60C0DD'
                    }
                },
            })
        } else {
            for (let i = 0; i < legend_data2.length; i++) {
                series2.push({
                    name: legend_data2[i],
                    type: 'line',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    data: res_data2[i],
                    smooth: true,
                    showSymbol: false,
                    lineStyle: {
                        width: 3
                    }
                })
            }
        }
        this.setState({
            option: {
                legend: [{
                    top: 14,
                    data: legend_data1,
                    itemHeight: 5,
                    itemWidth: 10,
                    textStyle: {
                        fontSize: 14
                    }
                }, {
                    top: 280,
                    data: legend_data2,
                    itemHeight: 5,
                    itemWidth: 10,
                    textStyle: {
                        fontSize: 14
                    }
                }],
                tooltip: {
                    confine: true,
                    borderWidth: 1,
                    borderColor: '#333',
                    backgroundColor: 'rgba(255,255,255,0.9)',
                    textStyle: {
                        fontSize: 5,
                        color: '#333'
                    },
                    transitionDuration:0
                },
                axisPointer: {
                    link: [{
                        xAxisIndex: [0, 1]
                    }]
                },
                dataZoom: [{
                    type: 'slider',
                    xAxisIndex: [0, 1],
                    realtime: false,
                    start: 50,
                    end: 100,
                    top: 470,
                    height: 20,
                    handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '120%'
                }, {
                    type: 'inside',
                    xAxisIndex: [0, 1],
                    start: 40,
                    end: 70,
                    top: 30,
                    height: 20
                }],
                xAxis: [{
                    type: 'category',
                    data: this.state.dates,
                    boundaryGap: false,
                    axisLine: {lineStyle: {color: '#777'}},
                    axisLabel: {
                        formatter: function (value) {
                            return echarts.format.formatTime('MM-dd', value);
                        },
                        fontSize: 10,
                        rotate: 35,
                    },
                    min: 'dataMin',
                    max: 'dataMax',
                    axisPointer: {
                        show: true
                    }
                },{
                    type: 'category',
                    gridIndex: 1,
                    data: this.state.dates,
                    scale: true,
                    boundaryGap: false,
                    splitLine: {show: false},
                    axisLabel: {show: false},
                    axisTick: {show: false},
                    axisLine: {lineStyle: {color: '#777'}},
                    splitNumber: 20,
                    min: 'dataMin',
                    max: 'dataMax',
                    axisPointer: {
                        show: true
                    }
                }],
                yAxis: [{
                    scale: true,
                    axisLine: {lineStyle: {color: '#777'}},
                    splitLine: {show: true},
                    axisTick: {show: false},
                    axisLabel: {
                        fontSize: 10
                    }
                },{
                    scale: true,
                    gridIndex: 1,
                    splitNumber: 4,
                    axisLine: {lineStyle: {color: '#777'}},
                    axisTick: {show: false},
                    axisLabel: {
                        fontSize: 10
                    }
                },{
                    scale: true,
                    gridIndex: 1,
                    splitNumber: 2,
                    axisLine: {lineStyle: {color: '#777'}},
                    axisTick: {show: false},
                    axisLabel: {
                        fontSize: 10
                    }
                }],
                grid: [{
                    left: 70,
                    right: 70,
                    top: 40,
                    height: 200
                }, {
                    left: 70,
                    right: 70,
                    height: 150,
                    top: 310
                }],
                series: series1.concat(series2)
            }
        })
    }

    componentDidMount() {
        this.getData("MA");
        this.interval = setInterval(()=>{
            if(this.state.first){
                if(this.state.option.series[1].data.length === 0
                    || this.state.option.series[4].data.length === 0){
                    this.getData("MA");
                }else{
                    this.setState({
                        first: false
                    })
                }
            }
            if(this.props.location.state){
                this.setState({
                    default: "94%"
                })
            }else{
                this.setState({
                    default: "83%"
                })
            }
        },100)
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    render() {
        document.title = "技术指标分析";
        return (
            <div style={{width:this.state.default, float: "right"}}>
                <div style={{height: "15vh", marginBottom:"2vh"}}>
                    <p style={{fontSize:"1.5vw", fontWeight:"bold", float:"left", marginTop:"2vh", marginLeft:"5%"}}>{this.state.base.name}</p>
                    <p style={{fontSize:"1.5vw", fontWeight:"bold", float:"left", marginTop:"2vh", marginLeft:"2%"}}>{this.state.base.code}</p>
                    <p style={{fontSize:"1.5vw", fontWeight:"bold", float:"left", marginTop:"2vh", marginLeft:"2%"}}>{this.state.base.date}</p>
                    <ul style={{width:"70%", height:"15vh", marginLeft:"35%"}}>
                        <li style={{width:"12vw", listStyleType:"none", fontSize:"1vw", lineHeight:"2vw", float:"left", marginTop:"2vh"}}>
                            开盘价: <span style={{fontWeight:"bold", color:"#ef232a"}}>{this.state.base.open}</span> 元</li>
                        <li style={{width:"12vw", listStyleType:"none", fontSize:"1vw", lineHeight:"2vw", float:"left", marginTop:"2vh"}}>
                            最高价: <span style={{fontWeight:"bold", color:"#ef232a"}}>{this.state.base.hight}</span> 元</li>
                        <li style={{width:"12vw", listStyleType:"none", fontSize:"1vw", lineHeight:"2vw", float:"left", marginTop:"2vh"}}>
                            涨跌幅: {this.state.base.change}%</li>
                        <li style={{width:"12vw", listStyleType:"none", fontSize:"1vw", lineHeight:"2vw", float:"left", marginTop:"2vh"}}>
                            成交量: {this.state.base.volume} 手</li>
                        <li style={{width:"12vw", listStyleType:"none", fontSize:"1vw", lineHeight:"2vw", float:"left", marginTop:"2vh"}}>
                            收盘价: <span style={{fontWeight:"bold", color:"#14b143"}}>{this.state.base.close}</span> 元</li>
                        <li style={{width:"12vw", listStyleType:"none", fontSize:"1vw", lineHeight:"2vw", float:"left", marginTop:"2vh"}}>
                            最低价: <span style={{fontWeight:"bold", color:"#14b143"}}>{this.state.base.low}</span> 元</li>
                        <li style={{width:"12vw", listStyleType:"none", fontSize:"1vw", lineHeight:"2vw", float:"left", marginTop:"2vh"}}>
                            涨跌额: {this.state.base.changeV} 元</li>
                        <li style={{width:"12vw", listStyleType:"none", fontSize:"1vw", lineHeight:"2vw", float:"left", marginTop:"2vh"}}>
                            成交额: {this.state.base.money} 元</li>
                    </ul>
                </div>
                <div style={{background: "#FAFAFA", height: "6vh"}}>
                    {/*<div style={{float: "left", marginLeft: "5%"}}>*/}
                    {/*    <TargetButton target={"日K"} color={this.state.target0 === "日K" ? "#09F" : "#666"}*/}
                    {/*                  onClick={() => this.getData("日K")}/>*/}
                    {/*    <TargetButton target={"周K"} color={this.state.target0 === "周K" ? "#09F" : "#666"}*/}
                    {/*                  onClick={() => this.getData("周K")}/>*/}
                    {/*    <TargetButton target={"月K"} color={this.state.target0 === "月K" ? "#09F" : "#666"}*/}
                    {/*                  onClick={() => this.getData("月K")}/>*/}
                    {/*</div>*/}
                    <div style={{float: "left", marginLeft: "5%"}}>
                        <TargetButton target={"MA"} color={this.state.target1 === "MA" ? "#09F" : "#666"}
                                      onClick={() => this.getData("MA")}/>
                        <TargetButton target={"EMA"} color={this.state.target1 === "EMA" ? "#09F" : "#666"}
                                      onClick={() => this.getData("EMA")}/>
                        <TargetButton target={"BOLL"} color={this.state.target1 === "BOLL" ? "#09F" : "#666"}
                                      onClick={() => this.getData("BOLL")}/>
                    </div>
                    <div style={{float: "Right", marginRight: "5%"}}>
                        <TargetButton target={"涨跌幅"} color={this.state.target2 === "涨跌幅" ? "#09F" : "#666"}
                                      onClick={() => this.getData("涨跌幅")}/>
                        <TargetButton target={"MACD"} color={this.state.target2 === "MACD" ? "#09F" : "#666"}
                                      onClick={() => this.getData("MACD")}/>
                        <TargetButton target={"RSV9"} color={this.state.target2 === "RSV9" ? "#09F" : "#666"}
                                      onClick={() => this.getData("RSV9")}/>
                        <TargetButton target={"KDJ9"} color={this.state.target2 === "KDJ9" ? "#09F" : "#666"}
                                      onClick={() => this.getData("KDJ9")}/>
                        <TargetButton target={"RSI9"} color={this.state.target2 === "RSI9" ? "#09F" : "#666"}
                                      onClick={() => this.getData("RSI9")}/>
                    </div>
                </div>
                <ReactEcharts option={this.state.option} notMerge={true} style={{
                    width: "100%",
                    height: "70vh",
                    margin: "0"
                }}/>
            </div>
        );
    }
}

class TargetButton extends Component {
    render() {
        return (
            <button style={{
                color: this.props.color,
                border: 0,
                background: "rgba(0,0,0,0)",
                fontSize: "1.5vw",
                outline: "none"
            }} onClick={this.props.onClick}>
                {this.props.target}
            </button>
        );
    }
}